

<script>
import myInput from "@/components/my-input";
import myButton from "@/components/my-button";
export default {
  name: "factory",
  data() {
    return {
      elements: [],
      dataMap: new Map()
    };
  },
  methods: {
    receiveVal(data) {

      if(this.dataMap.has(data.label)){
        this.dataMap.delete(data.label)
      }
      this.dataMap.set(data.label,data.val)
    },
    submit() {
      console.log(this.dataMap);
    }
  },
  components: {
    myInput,
    myButton
  },
  /*
  
      测试: 生成一个loginForm,
      mock数据包含两个input和一个button,
      所有数据通过props传入，
      子组件向父组件传值，照旧$event.emit
                        
  */
  render(createElement) {
    return createElement(
      "div",
      {
        class: "loginForm"
      },
      this.elements.map(element => {
        if (element.type === "myInput")
          return createElement(element.type, {
            class: element.type,
            props: {
              label: element.label,
              maxLength: element.maxLength,
              disabled: element.disabled === "false" ? false : true,
              defaultValue: element.defaultValue
            },
            on: {
              // 更新数据
              update: this.receiveVal 
            }
          });
        else if (element.type === "myButton") {
          return createElement(element.type, {
            class: element.type,
            props: {
              value: element.value,
              disabled: element.disabled === "false" ? false : true
            },
            on: {
              submit: this.submit
            }
          });
        }

      })
    );
  },
  mounted() {
    this.$axios.get("./static/data.json").then(response => {
      console.log(response.data);
      this.elements = response.data;
    });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.loginForm {
  margin: 50% auto;
  overflow: hidden;
  .myInput {
    margin-bottom: 10px;
  }
  .myButton {
    width: 100%;
    color: #ffffff;
    background: #59f;
    border: #59f;
  }
}
</style>